<template>
	<view class="progress_content">
		<scroll-view scroll-y="true"  class="scroll_content">
			<view class="log_list">
				<view class="log_item" v-for="(item,index) in logObjList" :key="index">
					<uni-icons type="smallcircle" class="icon_item" size="20"
						:color="index==0?'#007cff':'#EAECEE'"></uni-icons>
					<view class="block_item">
						<view class="title_span">
							<p class="content_time" :style="{color:index==0?'#000':'#999'}">
								{{item.createTime}}
							</p>
							<p class="title" :style="{color:index==0?'#007cff':'#999'}">
								{{'【'+item.type+'】'+item.createEmp+'&nbsp;'+item.name}}{{item.event}}
							</p>
							<view class="content_text" :style="{color:index==0?'#000':'#999'}">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import _ from "lodash"
	import store from '@/store_network/index.js'
	import { onReachBottom, onPullDownRefresh, onUnload, onLaunch, onLoad, onShow, onHide } from '@dcloudio/uni-app'
	import apiOrder from "@/util/network_api/apiOrder.js"
	let dataVo = ref({
		"limit": 0,
		"page": 1
	})
	const workId = ref(null)
	onLoad((e) => {
		if(!e.workId) return
		workId.value = e.workId
		getNetworkOrderLastLogObj(workId.value)
	})
	onShow((e) => {
		// getNetworkOrderLastLogObj(workId.value)
	})
	// 工单进展
	const logObjList = ref(null)
	const getNetworkOrderLastLogObj = async (id) => {
		uni.showLoading({
			title: '加载中...',
		})
		await apiOrder.getNetworkOrderLog(dataVo.value, id).then(res => {
			if (res.code == 20000) {
				logObjList.value = res.data.rows
			}
		})
		uni.hideLoading()
	}
</script>

<style lang="scss" scoped>
	.progress_content {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		overflow: hidden;
		.scroll_content{
			height: 100%;
			.log_list {
				padding: 12rpx 24rpx 200rpx;
				margin: 24rpx;
			
				.log_item {
					position: relative;
					border-left: 4rpx dashed #EAECEE;
					&:last-child {
						border-left: 4rpx dashed transparent;
					}
			
					.icon_item {
						position: absolute;
						left: -20rpx;
						top: -5rpx;
						z-index: 9;
					}
			
					.block_item {
						padding: 0 0 40rpx 24rpx;
			
						.title_span {
							.title {
								display: flex;
								align-items: center;
								flex-wrap: wrap;
								font-size: 28rpx;
								color: #007cff;
							}
			
							.content_text {
								display: flex;
								align-items: center;
								flex-wrap: wrap;
								font-size: 24rpx;
								text-indent: .5em;
								margin-top: 12rpx;
							}
			
							.content_time {
								font-size: 24rpx;
								text-indent: .5em;
								margin: 0rpx 0 12rpx;
							}
						}
					}
			
				}
			}
		}
	}

	
</style>